import DictTag, { DictValueEnum } from "@/components/DictTag";
// import { addMenu, exportMenu, getMenuList, removeMenu, updateMenu } from '@/services/system/menu';
import CustomBlockquote from "@/components/Blockquote";
import { createIcon } from "@/utils/IconUtil";
import { getAllKeys } from "@/utils";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import { ActionType, PageContainer, ProColumns, ProTable } from "@ant-design/pro-components";
import { Button, Input, Space, message } from "antd";
import { DataNode } from "antd/es/tree";
import React, { useEffect, useRef, useState } from "react";
import MenuForm, { MenuFormData } from "./components/menuForm";
import { getDict } from "@/services/api/module/system/dict";
import { getList, save, update } from "@/services/api/module/system/menu";
import FilterDrawer from "@/components/FilterDrawer";
import ImportExportDropdown from "@/components/ImportExportDropdown";
import { createTableColumns } from "./constants";
import CustomerTable from "@/components/CustomerTable";
import { dict } from "@/utils/DictionaryCacheManager";

const MenuTableList: React.FC = () => {
	const [modalVisible, setModalVisible] = useState<boolean>(false);
	const [searchFormValue, setSearchFormValue] = useState<any>(undefined);
	const [searchValue, setSearchValue] = useState<any>(undefined);
	const actionRef = useRef<ActionType>();
	const [currentRowId, setCurrentRowId] = useState<number | undefined>(undefined);
	const [selectedRows, setSelectedRows] = useState<API.Setting.Menu[]>([]);
	const [menuTree, setMenuTree] = useState<DataNode[]>([]);
	const [visibleOptions, setVisibleOptions] = useState<any>([]);
	const [statusOptions, setStatusOptions] = useState<any>([]);
	const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]);
	const [data, setData] = useState<any>();
	useEffect(() => {
		dict.getDict("sys_show_hide").then(data => {
			setVisibleOptions(data);
		});
		dict.getDict("sys_normal_disable").then(data => setStatusOptions(data));
	}, []);
	// 展开全部
	const handleColumnEditor = (record: any) => {
		setModalVisible(true);
		setCurrentRowId(record?.id);
	};
	const handleColumnRemove = () => {};
	const columns = createTableColumns(visibleOptions, handleColumnEditor, handleColumnRemove);

	const handleExpandAll = () => {
		setExpandedRowKeys(getAllKeys(data));
	};
	// 收起全部
	const handleCollapseAll = () => {
		setExpandedRowKeys([]);
	};
	const handleUpdate = async (values: MenuFormData) => {
		return new Promise((resolve, reject) => {
			update({ ...values } as MenuFormData)
				.then((res: any) => {
					message.success(res.msg);
					handleTableForm();
					resolve(true);
				})
				.catch(() => {
					reject(false);
				});
		});
	};
	const handleSave = async (values: MenuFormData) => {
		return new Promise((resolve, reject) => {
			save({ ...values } as MenuFormData)
				.then((res: any) => {
					message.success(res.msg);
					handleTableForm();
					resolve(true);
				})
				.catch(() => {
					reject(false);
				});
		});
	};
	// 关闭表单刷新列表
	const handleTableForm = async () => {
		setModalVisible(false);
		// setCu(undefined);
		actionRef?.current?.reload();
	};

	const tableDataRequest = async (params: {} | undefined) => {
		return await getList({ ...searchFormValue, ...searchValue }).then((data: any) => {
			setData(data?.data);
			return data;
		});
	};
	const handleOnSearch = async (value: any) => {
		setSearchValue({
			menuName: value
		});
		actionRef.current?.reload();
	};

	return (
		<>
			<CustomerTable<API.Setting.Menu>
				rowKey="id"
				actionRef={actionRef}
				tableStyle={{ minHeight: "calc(100vh - 200px)" }}
				key="menuList"
				scroll={{ y: undefined, x: 1000 }}
				toolbar={{
					search: (
						<Space>
							<Input.Search placeholder="菜单名称搜索" allowClear style={{ width: 280 }} onSearch={handleOnSearch} />
							<FilterDrawer
								columns={columns}
								tableActionRef={actionRef}
								onReset={() => {
									setSearchFormValue(undefined);
									actionRef?.current?.reload();
								}}
								onSubmit={(values: any) => {
									setSearchFormValue(values);
									actionRef?.current?.reload();
								}}
							/>
						</Space>
					)
				}}
				search={false}
				pagination={false}
				tableAlertRender={false}
				expandable={{
					expandedRowKeys,
					defaultExpandAllRows: true,
					onExpandedRowsChange: newExpandedRowKeys => {
						setExpandedRowKeys(newExpandedRowKeys);
					}
				}}
				// @ts-ignore
				toolBarRender={() => {
					return (
						<>
							<Button key="unfold" onClick={() => handleExpandAll()}>
								展开全部
							</Button>
							<Button key="packUp" onClick={() => handleCollapseAll()}>
								收起全部
							</Button>
							<Button
								type="primary"
								key="add"
								onClick={async () => {
									setModalVisible(true);
								}}
							>
								<PlusOutlined /> 新增菜单
							</Button>
							{selectedRows.length > 0 && (
								<Button type="primary" danger key="batchRemove" onClick={async () => {}}>
									<DeleteOutlined />
									批量删除
								</Button>
							)}
							<ImportExportDropdown key="import_export" columns={columns} onExport={() => {}} />
						</>
					);
				}}
				request={tableDataRequest}
				columns={columns}
				rowSelection={{
					onChange: (_, selectedRows) => {
						setSelectedRows(selectedRows);
					}
				}}
			/>

			<MenuForm
				onSubmit={async (values: MenuFormData) => {
					return values.id ? await handleUpdate(values) : await handleSave(values);
				}}
				onCancel={() => {
					setModalVisible(false);
					setCurrentRowId(undefined);
				}}
				open={modalVisible}
				visibleOptions={visibleOptions}
				statusOptions={statusOptions}
				id={currentRowId}
			/>
		</>
	);
};

export default MenuTableList;
